<template>
	<div class="home-container">
		<!-- 导航栏 -->
		<van-nav-bar class="page-nav-bar" fixed>
			<van-button
				class="search-btn"
				slot="title"
				type="info"
				size="small"
				round
				icon="search"
         to="/search"
				>搜索</van-button
			>
		</van-nav-bar>
		<!-- /导航栏 -->

    				<van-popup
					class="edit-channel-popup"
					v-model="isChannelEditShow"
					position="bottom"
					:style="{ height: '100%' }"
					closeable
					close-icon-position="top-left"
				>
					<ChannelEdit
						:myChannels="channels"
						:active="active"
						@update-active="onupdateActive"
					></ChannelEdit>
				</van-popup>

		<van-tabs
			class="channel-tabs"
			v-model="active"
			swipeable
			animated
			border
		>
			<van-tab
				:title="channel.name"
				v-for="channel in channels"
				:key="channel.id"
			>
				<ArticleList :channel="channel"></ArticleList>
			</van-tab>

			<!-- 右侧自定义内容 -->
			<!-- 右侧按钮 -->
			<template #nav-right>
				<!-- 占位元素 -->

				<div class="placeholder"></div>
				<!-- 频道编辑 -->
				<!-- <van-popup
					class="edit-channel-popup"
					v-model="isChannelEditShow"
					position="bottom"
					:style="{ height: '100%' }"
					closeable
					close-icon-position="top-left"
				>
					<ChannelEdit
						:myChannels="channels"
						:active="active"
						@update-active="onupdateActive"
					></ChannelEdit>
				</van-popup> -->
				<!-- 汉堡按钮 -->
				<div class="hamburger-btn" @click="isChannelEditShow = true">
					<i class="toutiao toutiao-gengduo"></i>
				</div>
			</template>

		</van-tabs>
	</div>
</template>

<script>
import { getChannelList } from '@/api/user'
import { mapState } from 'vuex'
import ArticleList from '@/views/home/components/article-list'
import ChannelEdit from './components/channel-edit'
import { getItem } from '@/utils/storage'
export default {
	name: 'HomeIndex',
	components: {
		ArticleList,
		ChannelEdit,
	},
	props: {},
	data() {
		return {
			active: 0, //激活，索引值
			channels: [], //用户信息列表
			isChannelEditShow: false,
		}
	},
	computed: {
		...mapState(['user']),
	},
	watch: {},
	created() {
		this.getChannels()
	},
	mounted() {},
	methods: {
		async getChannels() {
			try {
				// const { data } = await getChannelList()
				// console.log(data)
				// this.channels = data.data.channels
				let channels = []
				if (this.user) {
          // 已登录，获取用户频道列表
					const { data } = await getChannelList()
					channels = data.data.channels
				}else{
          // 未登录，判断是否有本地数据
          const localChannels=getItem('TOUTIAO_CHANNEL')
          if(localChannels) {
            channels=localChannels
          }else{
            const {data}=await getChannelList()
            channels = data.data.channels
          }
        }
        this.channels=channels
			} catch (err) {
				console.log('获取频道信息失败', err)
			}

		},
		onupdateActive(index, isChannelEditShow = true) {
			this.active = index
			this.isChannelEditShow = isChannelEditShow
		},
	},
}
</script>

<style scoped lang="less">
.home-container {
	/deep/ .van-nav-bar__title {
		max-width: unset;
	}
	.search-btn {
		width: 555px;
		height: 64px;
		background-color: #5babfb;
		border: none;
		font-size: 28px;
		.van-icon {
			font-size: 32px;
		}
	}
}

/deep/ .channel-tabs {
	// 这里
	padding-top: 90px;
	padding-bottom: 100px;

	.van-tab {
		border-right: 1px solid #edeff3;
		min-width: 200px;
		font-size: 30px;
		color: #777777;
	}

	.van-tab--active {
		color: #333333;
	}

	.van-tabs__nav {
		padding-bottom: 0;
	}

	.van-tabs__line {
		bottom: 8px;
		width: 31px !important;
		height: 6px;
		background-color: #3296fa;
	}

	.placeholder {
		flex-shrink: 0;
		width: 66px;
		height: 82px;
	}
	// .edit-channel-popup{
	// box-sizing: border-box;
	// }
	.hamburger-btn {
		position: fixed;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 66px;
		height: 82px;
		background-color: #fff;
		background-color: rgba(255, 255, 255, 0.902);
		i.toutiao {
			font-size: 33px;
		}
		&:before {
			content: '';
			position: absolute;
			left: 0;
			width: 1px;
			height: 58px;
			background-image: url(~@/assets/gradient-gray-line.png);
			background-size: contain;
		}
	}
}
</style>
